<template>
  <el-main>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="never" style="min-height: 540px">
          <div class="margin-bottom-20" style="text-align: center">
            <svgicon height="100" name="profile" original width="100" />
          </div>
          <div>
            <el-form label-width="80px">
              <el-form-item label="姓名">
                {{ form.userName }}
              </el-form-item>
              <el-form-item label="账号">
                {{ form.accountName }}
              </el-form-item>
              <el-form-item label="角色">
                {{ form.authGroupName }}
              </el-form-item>
              <el-form-item label="公司">
                {{ form.companyName }}
              </el-form-item>
              <el-form-item label="联系方式">
                {{ form.mobile }}
              </el-form-item>
              <el-form-item label="住址">
                {{ form.address }}
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="never" style="min-height: 540px">
          <el-tabs>
            <el-tab-pane label="基本信息">
              <el-form
                :model="form"
                label-width="80px"
                ref="baseForm"
                style="width: 360px"
              >
                <el-form-item label="姓名">
                  <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                  <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="住址">
                  <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="changeBaseInfo()" type="primary"
                    >更新基本信息
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="重置密码">
              <el-form
                :model="passwdForm"
                label-width="80px"
                ref="passwdForm"
                style="width: 360px"
              >
                <el-form-item label="旧密码">
                  <el-input
                    autocomplete="off"
                    show-password
                    type="password"
                    v-model="passwdForm.oldPasswd"
                  />
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input
                    autocomplete="off"
                    show-password
                    type="password"
                    v-model="passwdForm.newPasswd"
                  />
                </el-form-item>
                <el-form-item label="确认密码">
                  <el-input
                    autocomplete="off"
                    show-password
                    type="password"
                    v-model="passwdForm.rePasswd"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button @click="changePasswd()" type="primary"
                    >更新密码
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      form: {
        userName: "孙常鹏",
        accountName: "sunchangpeng",
        authGroupName: "管理员",
        companyName: "美团点评",
        mobile: "18146534769",
        address: "国美第一城"
      },
      passwdForm: {
        oldPasswd: "",
        newPasswd: "",
        rePasswd: ""
      }
    };
  },
  methods: {
    changeBaseInfo() {},
    changePasswd() {}
  }
};
</script>
